
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>方案SQL测试</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>

    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/addon/display/fullscreen.css" rel="stylesheet" />
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/mode/sql/sql.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/mode/javascript/javascript.js"></script>

    <style>
        /*-------------------------tab-------------------------*/

        .layui-tab {
            margin: 0;
        }


        /*边框*/

        .layui-tab-title {
            border-bottom-width: 3px;
            border-bottom-color: #f7f7f7;
        }


        /*字体*/

        .layui-tab-title li {
            font-size: 11px!important;
        }


        /*高度*/

        .tabwrap .layui-tab-title {
            height: 24px;
        }


        /*高度*/

        .tabwrap .layui-tab-title li {
            line-height: 24px;
        }


        /*高度*/

        .tabwrap .layui-tab-title .layui-this:after {
            height: 24px;
        }

        .layui-tab-title .layui-this:after {
            /*height: auto!important;*/
        }


        /*选中时样式*/

        .tabwrap .layui-tab-title .layui-this {
            color: white;
            background: #41BFC0;
        }


        /*关闭按钮样式*/

        .tabwrap .layui-tab-title li .layui-tab-close {
            color: #FFFFFF!important;
        }


        /*顶部搜索容器*/

        .tophead {
            height: 32px;
            /*border-bottom: 1px solid #F7F7F7;*/
            padding: 0 5px;
        }


        /*顶部输入框，下拉框去掉layui默认边距*/

        .tophead .layui-form-item {
            margin-bottom: 0px!important;
        }


        /*顶部输入框，下拉框左边文本样式*/

        .tophead .layui-form-label {
            padding: 0;
            line-height: 25px;
            width: auto;
        }


        /*顶部form块样式*/

        .tophead .layui-input-block {
            margin-left: 50px;
            min-height: 26px;
        }


        /*顶部输入框，下拉框设置高度*/

        .tophead .layui-input,
        .layui-select {
            height: 25px;
        }


        /*顶部下拉框设置子项高度*/

        .tophead .layui-form-select dl {
            top: 26px;
            padding: 0;
        }


        /*顶部下拉框设置子项内容高度*/

        .tophead .layui-form-select dl dd,
        .layui-form-select dl dt {
            line-height: 24px;
        }

        .tophead .layui-form-item {
            width: 165px;
        }


        /*顶部下拉框图标大小*/

        .tophead .layui-form-select .layui-edge {
            border-width: 4px;
        }


        /*搜索框左边距*/

        .tophead .search .layui-input-block {
            margin-left: 32px;
        }


        /*表格字体大小*/

        .layui-table td,
        .layui-table th {
            font-size: 11px!important;
        }


        /*表格边距*/

        .layui-table,
        .layui-table-view {
            margin: 0;
        }

        .tab0>li:nth-child(1) .layui-icon.layui-unselect.layui-tab-close {
            display: none;
        }
        .layui-btn {
            height: 26px;
            line-height: 26px;
            font-size: 11px;
        }
    </style>
</head>
<body>
<div>
    <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf">
        <div class="flex flex-align-center">
            <div class="layui-form flex flex-align-center" lay-filter="formTest" id="cxkjDiv">

                <div class="layui-form-item marginleft10 search">
                    <label class="layui-form-label">查询</label>
                    <div class="layui-input-block">
                        <input type="text" name="searchValue" id="searchValue" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <button type="button" onclick="loaddata()" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>
            </div>
        </div>
        <div class="layui-btn-group btns tab1">
        </div>
    </div>
    <div style="height:100%;width: 100%;background: #F7F7F7;padding: 3px 0;">
        <div class="backgroundf" style="width: 50%;float: left;margin-left: 5px;">
            <div style="padding: 5px;">执行SQL <span style="color: red;margin-left: 5px;">请求路径为:/ZhibiaoSearchService?p_plan_id=[(${planid})]</span></div>
            <textarea name="strsql" id="strsql"  class="layui-textarea textheight" style="height: 88%"></textarea>
        </div>
        <div class="backgroundf" style="width: 49%;float: right;margin-right: 5px;">
            <div style="padding: 5px;">响应JSON</div>
            <textarea name="resJson" id="resJson" placeholder="" class="layui-textarea textheight" style="height: 88%"></textarea>
        </div>
    </div>
</div>
</body>
<script>
    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();
    var planid='[(${planid})]';
    var paraList=[(${paraList})];
    $(function () {

        var str="";
        $.each(paraList, function (index, item) {
            // str=str+'<div className="layui-form-item marginleft10 search">';
            // str=str+'   <label className="layui-form-label">'+item.paranamezh+'</label>';
            // str=str+'   <div className="layui-input-block">';
            // str=str+'       <input type="text" name="'+item.paraname+'" id="'+item.paraname+'" autoComplete="off"';
            // str=str+'               className="layui-input" />';
            // str=str+'    </div>';
            // str=str+'</div>';

            str += "<div class='layui-form-item search-item'>";
            str += " <label class='layui-form-label'>" + item.paranamezh + "</label>";
            str += "<div class='layui-input-block'>";
            str += "<input type='text' autocomplete=\"off\" id='" + item.paraname + "' name='" + item.paraname + "'  class='layui-input'>";
            str += "</div>";
            str += "</div>";
        });
        str=str+'<button type="button" onclick="loaddata()" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>';
        $("#cxkjDiv").html(str);
        layui.form.render();

        $("#resJson").height( height-80);
        $("#strsql").height( height-80);

        editorStrsql = CodeMirror.fromTextArea(document.getElementById("strsql"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            readOnly:'false',
            mode: "text/x-mssql",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editorStrsql.setOption("theme", "eclipse");
        editorStrsql.setSize('auto', height-80);

        editorResJson = CodeMirror.fromTextArea(document.getElementById("resJson"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            readOnly:'false',
            mode: "application/ld+json",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editorResJson.setOption("theme", "eclipse");
        editorResJson.setSize('auto', height-80);
    })

    function loaddata() {
        var formvalue1 = layui.form.val("formTest");
        formvalue1.p_plan_id=planid;
        editorResJson.setValue("")
        editorStrsql.setValue("")

        dlCommon.getJSON("/ZhibiaoSearchService",formvalue1,function(res){
            // if(!res.success){
            //     dlCommon.layerError(res.msg);
            // }
            try{
                $("#resJson").val(JSON.stringify(res,null, 2));
                editorResJson.setValue(JSON.stringify(res,null, 2))
            }catch(err) {
                $("#resJson").val(res);
                editorResJson.setValue(res)
            }
        },true);

        var formvalue2 = layui.form.val("formTest");
        formvalue2.p_plan_id=planid;
        formvalue2.p_test_sql=true;
        dlCommon.getJSON("/ZhibiaoSearchService",formvalue2,function(res){
            // if(!res.success){
            //     dlCommon.layerError(res.msg);
            // }
            try{
                var sqlStr='';
                $.each(res.data, function (index, item) {
                    sqlStr=sqlStr+item+'\r\n\r\n'
                });
                $("#strsql").val(sqlStr);
                editorStrsql.setValue(sqlStr)
            }catch(err) {
                $("#strsql").val(res);
                editorStrsql.setValue(res)
            }
        },true);
    }
</script>

</html>